import { getItemById } from '@/services/ant-design-pro/api';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Col, Divider, Form, InputNumber, Row } from 'antd';
import React, { useEffect, useState } from 'react';

/*const data = {
  itemName: 'xxx',
  price: 123,
  remain: 33,
  desc: 'xxxxxxxxxxx',
  imgUrl: '/path/to/your/image.jpg',
};*/

interface Props {
  itemId: string;
}

const GoodsDetail: React.FC<Props> = ({ itemId }) => {
  const [item, setItem] = useState<API.ItemInfo>({});
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    setIsLoading(true);
    setError(null);

    getItemById(itemId)
      .then((data) => {
        setItem(data);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(`获取商品信息失败: ${err.message}`);
        setIsLoading(false);
      });
  }, [itemId]);

  return (
    <PageContainer>
      <div>
        {isLoading ? (
          <p>正在加载...</p>
        ) : error ? (
          <p>{error}</p>
        ) : (
          <div>
            <Row>
              <Col span={10}>
                {item.data?.imgUrl && (
                  <img
                    src={item.data?.imgUrl}
                    alt={item.data?.itemName}
                    style={{ width: '100%', height: '100%' }}
                  />
                )}
              </Col>
              <Col span={14}>
                <Form name="good">
                  <Form.Item label="商品名：">{item.data?.itemName}</Form.Item>

                  <Form.Item label="售价：">¥{item.data?.price}</Form.Item>

                  <Form.Item label="库存：">{item.data?.remain}</Form.Item>

                  <Form.Item label="数量：">
                    <InputNumber min={1} max={100} defaultValue={1} />
                  </Form.Item>

                  <Form.Item>
                    <Button type="primary" htmlType="submit">
                      加入购物车
                    </Button>
                  </Form.Item>
                </Form>
              </Col>
            </Row>

            <Divider orientation="left" plain>
              商品详细信息
            </Divider>
            <p>{item.data?.desc}</p>
          </div>
        )}
      </div>
    </PageContainer>
  );
};

export default GoodsDetail;
